<template>
  <div class="h-screen flex flex-col">
    <header class="h-14 bg-gray-800 text-white flex items-center px-4">
      <h1 class="text-xl font-bold">AI 知识库问答</h1>
    </header>
    
    <main class="flex-1 container mx-auto p-4 flex">
      <div class="w-full max-w-4xl mx-auto bg-white rounded-lg shadow-lg flex flex-col">
        <!-- 聊天记录区域 -->
        <div class="flex-1 p-4 overflow-auto" ref="chatContainer">
          <div v-for="(msg, index) in chatHistory" :key="index" class="mb-4">
            <div :class="[
              'max-w-[80%] rounded-lg p-3',
              msg.role === 'user' 
                ? 'bg-blue-500 text-white ml-auto' 
                : 'bg-gray-100 text-gray-800'
            ]">
              <div class="whitespace-pre-line">{{ msg.content }}</div>
            </div>
          </div>
        </div>
        
        <!-- 输入区域 -->
        <div class="border-t p-4">
          <div class="flex gap-2">
            <el-input
              v-model="userInput"
              type="textarea"
              :rows="3"
              :autosize="{ minRows: 1, maxRows: 3 }"
              placeholder="请输入您的问题..."
              :disabled="loading"
              @keyup.enter.exact="sendMessage"
              @keyup.enter.shift.prevent="userInput += '\n'"
            />
            <el-button 
              type="primary" 
              :icon="loading ? 'Loading' : 'Position'"
              :loading="loading"
              @click="sendMessage"
            >
              发送
            </el-button>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import axios from 'axios'

const userInput = ref('')
const loading = ref(false)
const chatHistory = ref([])
const chatContainer = ref(null)
let conversationId = null

// 发送消息
async function sendMessage(event) {
  if (event?.type === 'keyup' && event.shiftKey) return
  if (!userInput.value.trim() || loading.value) return
  
  const message = userInput.value.trim()
  userInput.value = ''
  loading.value = true
  
  // 添加用户消息到历史记录
  chatHistory.value.push({
    role: 'user',
    content: message
  })
  
  try {
    const response = await axios.post('/api/chat', {
      query: message,
      conversationId
    })
    
    // 保存会话ID
    conversationId = response.data.conversationId
    
    // 添加AI回复到历史记录
    chatHistory.value.push({
      role: 'assistant',
      content: response.data.answer
    })
  } catch (error) {
    console.error('Error:', error)
    chatHistory.value.push({
      role: 'assistant',
      content: '抱歉，发生了错误，请稍后重试。'
    })
  } finally {
    loading.value = false
    // 滚动到底部
    await nextTick()
    if (chatContainer.value) {
      chatContainer.value.scrollTop = chatContainer.value.scrollHeight
    }
  }
}

// 组件挂载时滚动到底部
onMounted(() => {
  if (chatContainer.value) {
    chatContainer.value.scrollTop = chatContainer.value.scrollHeight
  }
})
</script>

<style>
.el-input {
  --el-input-hover-border-color: #409eff;
  --el-input-focus-border-color: #409eff;
}

.whitespace-pre-line {
  white-space: pre-line;
}
</style> 